<template>
  <basic-dialog
    title="关联商品"
    width="55%"
    :visible="dialogVisible"
    :show-close="false"
    :showFooter="false"
  >
    <basic-form
      ref="formData"
      formItemWidth="80px"
      isBtnBarSingleRow
      :isScalingBtn="false"
      :formColumns="formItemList"
      :dataSource="formData"
      :handleSearchForm="handleQueryForm"
      :hasQueryPermission="false"
      @getFormData="getFormData"
    >
      <template slot="extensionActions">
        <el-button type="primary" @click="handleBatchLinked">批量关联</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </template>
    </basic-form>
    <SkusTable
      class="table-wrap"
      showSelectCol
      showPagination
      :loading="tableInfo.loading"
      :columns="tableInfo.columns"
      :dataSource="tableInfo.list"
      :pagination="pagination"
      :total="pagination.total"
      :selectionChange="handleSelectionChange"
      :pageSizes="[10, 20, 40, 200]"
      @pageChange="handlePageChange"
      @pageSizeSelect="handlePageSizeChange"
    />
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import BasicForm from '@/components/BasicForm';
import SkusTable from '@/components/skusTable';
import skusPage from '@/mixins/commodity/skusPage';
import { setAuthBtnId } from '@/utils/bizUtils';
import { getSpuPagerService } from '@/api/commodity/commodityInfoEdit/basicAttrBatchEdit';
export default {
  mixins: [skusPage],
  components: {
    BasicDialog,
    BasicForm,
    SkusTable
  },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
  },
  data () {
    return {
      dialogVisible: false,
      formData: {
        categoryPath: '',
        spuNo: '',
        skuNo: '',
        productName: ''
      },
      formItemList: [
        {
          prop: 'categoryPath',
          label: '商品分类',
          type: 'input'
        },
        {
          prop: 'spuNo',
          label: 'SPU编码',
          type: 'input'
        },
        {
          prop: 'productName',
          label: '商品名称',
          type: 'input'
        },
      ],
      tableInfo: {
        list: [],
        selection: [],
        loading: false,
        columns: [
          {
            title: '商品名称',
            key: 'productName'
          },
          {
            title: 'SPU编码',
            key: 'spuNo'
          },
          {
            title: '商品分类',
            key: 'categoryPath'
          },
          {
            title: '管理区域',
            key: 'manageAreaName'
          },
          {
            title: '品牌',
            key: 'brandName'
          }
        ]
      },
    }
  },
  watch: {
    visible (val) {
      this.dialogVisible = val;
    }
  },
  computed: {
    hasNoSelection () {
      return this.tableInfo.selection.length == 0
    }
  },
  methods: {
    async getTableData () {
      setAuthBtnId('关联商品')
      const data = {
        ...this.formData,
        ...this.paginationParams,
        skuNos: [this.formData.skuNo]
      }
      const loadingFn = state => { this.tableInfo.loading = state }
      const res = await getSpuPagerService(data, loadingFn)
      if (res?.retData) {
        this.tableInfo.list = res.retData.results;
        this.setTotalNum(res.retData.totalNum);
      }
    },
    // 批量关联
    handleBatchLinked () {
      if (this.hasNoSelection) return this.$message.warning('请勾选商品后再进行关联')
      this.$emit('getLinkedRows', this.tableInfo.selection);
      this.resetDialogState()
      this.handleCancel()
    },
    // 取消
    handleCancel () {
      this.$emit('update:visible', this.dialogVisible = false);
    },
    // 表格数据勾选或勾选取消
    handleSelectionChange (list) {
      this.tableInfo.selection = list;
    },
    // 重置弹框状态
    resetDialogState () {
      this.$refs.formData.handleResetForm()
      this.tableInfo.list = []
      this.pageNum = 1
      this.pageSize = 10
      this.setTotalNum(0)
    }
  }
}
</script>
<style lang="less" scoped>
.table-wrap {
  margin-top: 10px;
}
</style>
